import React, { PureComponent } from 'react'
import { Button } from "antd";
import {withRouter} from "react-router-dom";
import { connect } from "react-redux";
import DoubleCheck from "@common/presentational/DoubleCheck";
import {
    getWechatAccountList,
    wechatPayApplyDetail,
    deleteWechatAccount
} from "@sagas/payment";
import {
    getWechatMiniInfo
} from "@sagas/thirdparty";
import SelectAccountTypeModal from "@components/payment/modal/SelectAccountTypeModal";
import ChangeWechatNameModal from "@components/payment/modal/ChangeWechatNameModal";
import WechatProcessModal from "@components/payment/modal/WechatProcessModal";
import BilinIcon from "@common/presentational/BilinIcon";
import { PAYMENT_WECHAT_STATUS } from '@constants/PaymentStatus'
@connect(({ payment }) => ({
    rechargeWechatAccount: payment.rechargeWechatAccount,
}), {
    getWechatAccountList,
    wechatPayApplyDetail,
    getWechatMiniInfo,
    deleteWechatAccount
})
@withRouter
class PaymentWechatPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state={
            showMiniTips: false
        }
        this.selectAccountTypeModalRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)
        this.goCreatePage = this.goCreatePage.bind(this)
        this.getWechatMini = this.getWechatMini.bind(this)
        this.goWechatMiniPage = this.goWechatMiniPage.bind(this)

        this.changeNameModalRef = React.createRef()
        this.processModalRef = React.createRef()
    }

    componentDidMount() {
        this.getTableInfo()
        this.getWechatMini()
    }

    getWechatMini(){
        const { getWechatMiniInfo } = this.props
        getWechatMiniInfo((res) => {
            // 已创建
            if(!res.version?.release_version){
                this.setState({
                    showMiniTips: true
                })
            }
        }, () => {
            // 未创建
            this.setState({
                showMiniTips: true
            })
        })
    }

    changeName(item){
        this.changeNameModalRef.current?.show({
            name: item.name,
            id: item.id
        })
     }

    deleteAccount(item){
        const { deleteWechatAccount } = this.props
        deleteWechatAccount({
             id: item.id
         },res=>{
             this.getTableInfo()
         })
    }

    showProcess(item) {
        const { wechatPayApplyDetail } = this.props
         wechatPayApplyDetail({
             id: item.id
         },res=>{
             this.processModalRef.current?.show({
                ...res.query_result,
                ...res.account_info,
            })
         })
    }

    getTableInfo() {
        this.props.getWechatAccountList({
            pageNo: 1,
            pageSize: 100
        })
    }

    showType() {
        this.selectAccountTypeModalRef.current?.show()
    }

    goCreatePage(type){
        const { history } = this.props
        history.push(`/payment/wechat/create/${type}`)
    }

    goWechatMiniPage(type){
        const { history } = this.props
        history.push('/third-party/wechat')
    }

    render() {
        const { rechargeWechatAccount } = this.props
        const { showMiniTips } = this.state
        return (
            <div className="payment-page">
                {showMiniTips ?<div className='payment-top-issue flex-row-between'>
                    <div className='ft-clr-d'>
                        因微信收款账号申请需要对应小程序信息，请先完成小程序授权发布，否则收款账号将无法成功开通
                    </div>
                    <div onClick={this.goWechatMiniPage} className='clr-green cur-poi'>
                        前往发布
                    </div>
                </div> : null}
                <div className="flex-vertical-center">
                    <Button type="primary" disabled={showMiniTips} className="button-small mgb-24" onClick={this.showType.bind(this)}><BilinIcon type="plus" className="ft-18 mgr-8"/>新建</Button>
                </div>
                {(rechargeWechatAccount.accounts || []).map(item => {
                    return (<div key={item.id} className='mgb-24 flex-row-between customer-table-line'>
                        <div className='line-left'>
                            <div>
                                <span className="ft-16 ft-clr-d">{item.name}</span>
                                <span className={"ft-12 ft-clr-ml mgl-12 status status-" + `${item.status}`}>{PAYMENT_WECHAT_STATUS[item.status]}</span>
                            </div>
                            <div className="mgt-12">
                                {item.status === 6 &&<span className="ft-14 ft-clr-ml mgr-48">商户号:{item.merchant_id}</span>}
                                <span className="ft-14 ft-clr-ml mgr-48">主体:{item.principal_name}</span>
                            </div>
                        </div>
                        <div className="flex">
                            <div onClick={this.changeName.bind(this,item)} className="mgr-8 ft-hover">修改别名</div>
                           { item.status !== 0 && item.status !== 4 && item.status !== 7 ? <div onClick={this.showProcess.bind(this,item)} className="mgr-8 ft-hover">查看进度</div> : null}
                            <DoubleCheck onClick={this.deleteAccount.bind(this, item)}>
                                <div className="mgr-8 ft-hover">删除</div>
                            </DoubleCheck>
                        </div>
                    </div>)
                })}
                <ChangeWechatNameModal callback={this.getTableInfo} ref={this.changeNameModalRef} />
                <WechatProcessModal ref={this.processModalRef} />
                <SelectAccountTypeModal callback={this.goCreatePage} ref={this.selectAccountTypeModalRef} />
            </div>
        )
    }
}

export default PaymentWechatPage